<template>
    <div>
        <div class="box clear">
            <div class="left fleft">
                <!-- 柱状图 -->
                <div class="top background">
                    <div style="height:300px;padding-top:20px;" id="line_dynamic"></div>
                </div>
                <!-- 出口商品Top5 -->
                <div class="bottom background">
                    <div style="height:380px;padding-top:20px;" id="line_pie"></div>
                </div>
            </div>
            <!-- 表格 -->
            <div class="right fright">
                <div class="top background">
                    <div class="top_exit">
                        <p class="fleft" style="width:20%;"></p>
                        <p class="fleft" style="width:20%;">在手订单数</p>
                        <p class="fleft" style="width:20%;">在手订单金额</p>
                        <p class="fleft" style="width:20%;">出货订单数</p>
                        <p class="fleft" style="width:20%;">出货订单金额</p>
                    </div>
                    <div style="padding: 30px 0;">
                        <div class="fleft" style="width: 20%;"><strong>当月</strong></div>
                        <div class="fleft" style="width: 20%;">{{tableData.handOrderList[0].num}}笔</div>
                        <div class="fleft" style="width: 20%;">{{tableData.handOrderList[0].money}}万美元</div>
                        <div class="fleft" style="width: 20%;">{{tableData.deliverOrderList[0].num}}笔</div>
                        <div class="fleft" style="width: 20%;">{{tableData.deliverOrderList[0].money}}万美元</div>
                    </div>
                    <div style="padding: 30px 0;">
                        <div class="fleft" style="width: 20%;"><strong>上月</strong></div>
                        <div class="fleft" style="width: 20%;">{{tableData.handOrderList[1].num}}笔</div>
                        <div class="fleft" style="width: 20%;">{{tableData.handOrderList[1].money}}万美元</div>
                        <div class="fleft" style="width: 20%;">{{tableData.deliverOrderList[1].num}}笔</div>
                        <div class="fleft" style="width: 20%;">{{tableData.deliverOrderList[1].money}}万美元</div>
                    </div>
                    <div style="padding: 30px 0;">
                        <div class="fleft" style="width: 20%;"><strong>累计</strong></div>
                        <div class="fleft" style="width: 20%;">{{tableData.handOrderList[2].num}}笔</div>
                        <div class="fleft" style="width: 20%;">{{tableData.handOrderList[2].money}}万美元</div>
                        <div class="fleft" style="width: 20%;">{{tableData.deliverOrderList[2].num}}笔</div>
                        <div class="fleft" style="width: 20%;">{{tableData.deliverOrderList[2].money}}万美元</div>
                    </div>
                </div>
                <!-- 折线图 -->
                <div class="bottom background">
                    <div style="height:370px;padding-top:20px;" id="line_stacked"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        getDataCount,
        getDataBar,
        getDataTops,
        getDataChain
    } from "@/api/show_data";

    export default {
        name: "hello",
        data() {
            return {
                data: [],
                axisData: [],
                tableData: {
                    "deliverOrderList":[
                        {
                            "money":0,
                            "num":0,
                            "title":"当月",
                            "unit":"万美元"
                        },
                        {
                            "money":0,
                            "num":0,
                            "title":"上月",
                            "unit":"万美元"
                        },
                        {
                            "money":0,
                            "num":0,
                            "title":"累计",
                            "unit":"万美元"
                        }
                    ],
                    "handOrderList":[
                        {
                            "money":0,
                            "num":0,
                            "title":"当月",
                            "unit":"万美元"
                        },
                        {
                            "money":0,
                            "num":0,
                            "title":"上月",
                            "unit":"万美元"
                        },
                        {
                            "money":0,
                            "num":0,
                            "title":"累计",
                            "unit":"万美元"
                        }
                    ]
                },
                stackedData: [],
                dynamicData: [],
                pieData: []
            };
        },
        mounted() {
            this.line_dynamic(); //柱状图
            this.line_pie(); //饼图
            this.line_stacked(); //折线图
            this.getData();
        },
        methods: {
            //获取列表数据
            getData() {
                getDataCount().then(res => {
                    if (res.code == 0) {
                        this.tableData = res.data;
                    } else {
                        this.$notify.error(res.msg);
                    }
                });
            },
            //柱状图
            line_dynamic() {
                getDataBar()
                    .then(res => {
                        if (res.code == 0) {
                            this.dynamicData = res.data;
                            console.log(this.dynamicData);

                            let nameData = [];
                            let moneyData = [];
                            let numData = [];
                            let unitData = [];
                            res.data.forEach(function (el, idx) {
                                // this.$set(nameData,el.name);
                                nameData.push(el.name);
                                moneyData.push(el.money);
                                numData.push(el.num);
                                unitData.push(el.unit);
                            });

                            // 基于准备好的dom，初始化echarts实例
                            let myChart = this.$echarts.init(
                                document.getElementById("line_dynamic")
                            );
                            // 绘制图表
                            let option = {
                                title: {
                                    // text: "动态数据"
                                    // subtext: "纯属虚构"
                                },
                                tooltip: {
                                    trigger: "axis",
                                    axisPointer: {
                                        type: "cross",
                                        label: {
                                            backgroundColor: "#283b56"
                                        }
                                    }
                                },
                                legend: {
                                    data: ["金额", "订单"]
                                },
                                toolbox: {
                                    show: true,

                                },
                                dataZoom: {
                                    show: false,
                                    start: 0,
                                    // end: 100
                                },
                                xAxis: [
                                    {
                                        type: "category",
                                        boundaryGap: true,
                                        data: nameData //X轴下 日期
                                    },
                                    {
                                        type: "category",
                                        boundaryGap: true,
                                        // data: nameData //X轴上 日期
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: "value",
                                        scale: true,
                                        name: "万美元",
                                        min: 0,
                                        boundaryGap: [0.2, 0.2]
                                    },
                                    {
                                        type: "value",
                                        scale: true,
                                        name: "订单数",
                                        // max: 50,
                                        min: 0,
                                        boundaryGap: [0.2, 0.2]
                                    }
                                ],
                                series: [
                                    {
                                        name: "订单",
                                        barMaxWidth: '50',
                                        type: "bar",

                                        xAxisIndex: 1,
                                        yAxisIndex: 1,
                                        data: numData //订单数
                                    },
                                    {
                                        name: "金额",
                                        type: "line",
                                        data: moneyData //金额数
                                    }
                                ]
                            };
                            myChart.setOption(option);
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            //饼图
            line_pie() {
                getDataTops()
                    .then(res => {
                        if (res.code == 0) {
                            this.pieData = res.data;

                            let sourceData = [];
                            let nameData = [];
                            res.data.forEach(function (el, idx) {
                                let arr = {};
                                arr.name = el.name;
                                arr.value = el.num;
                                arr.money = el.money;
                                sourceData.push(arr);
                            });
                            res.data.forEach(function (el, idx) {
                                nameData.push(el.name);
                            });

                            // 基于准备好的dom，初始化echarts实例
                            let myChart = this.$echarts.init(
                                document.getElementById("line_pie")
                            );
                            // 绘制图表
                            let option = {
                                title: {
                                    text: "出口商品排行",
                                    // subtext: "纯属虚构",
                                    x: "center"
                                },
                                tooltip: {
                                    trigger: "item",
                                    // formatter: "{a} <br/>{b} : {c} 单 ({d}%)"
                                    formatter:function (params) {

                                        var res = `<div>
                                                        <p>${params.name}:${params.value} 笔 <br/>占比：${params.percent}%</p>
                                                        <p>金额：${params.data.money}美元</p>

                                                    </div>`
                                        return res;
                                    }
                                },
                                legend: {
                                    orient: "vertical",
                                    left: "right",
                                    data: nameData
                                    // data: [
                                    //   "直接访问",
                                    //   "邮件营销",
                                    //   "联盟广告",
                                    //   "视频广告",
                                    //   "搜索引擎"
                                    // ]
                                },
                                series: [
                                    {
                                        name: "",
                                        type: "pie",
                                        radius: "55%",
                                        center: ["50%", "60%"],
                                        // data: [
                                        //   { value: 335, name: "直接访问" },
                                        //   { value: 310, name: "邮件营销" },
                                        //   { value: 234, name: "联盟广告" },
                                        //   { value: 135, name: "视频广告" },
                                        //   { value: 1548, name: "搜索引擎" }
                                        // ],
                                        data: sourceData,
                                        itemStyle: {
                                            emphasis: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: "rgba(0, 0, 0, 0.5)"
                                            }
                                        }
                                    }
                                ]
                            };
                            myChart.setOption(option);
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            //折线图
            line_stacked() {
                getDataChain()
                    .then(res => {
                        let nameA = [];
                        let dataA = [];
                        let arr = [];
                        if (res.code == 0) {
                            arr = res.data;
                            arr.forEach(function (item, i) {
                                let obj = {};
                                let _name = item.name || 'null';
                                obj.value = item.num;
                                obj.name = _name;
                                obj.money = item.money;
                                nameA.push(_name)
                                dataA.push(obj);
                            })
                            let myChart = this.$echarts.init(
                                document.getElementById("line_stacked")
                            );
                            let option = {
                                title: {
                                    text: "出口地区排行",
                                    subtext: "按订单量排序",
                                    x: "center"
                                },
                                tooltip: {
                                    trigger: 'item',
                                    // formatter: "{a} <br/>{b}: {c} ({d}%)",
                                    formatter:function (params) {
                                        console.log(params)
                                        var res = `<div>
                                                        <p>${params.name}:${params.value} 笔 <br/>占比：${params.percent}%</p>
                                                        <p>金额：${params.data.money}美元</p>

                                                    </div>`
                                        return res;
                                    }
                                },
                                legend: {
                                    orient: 'vertical',
                                    x: 'right',
                                    data: nameA
                                },
                                series: [
                                    {
                                        name: '',
                                        type: 'pie',
                                        radius: ['50%', '70%'],
                                        avoidLabelOverlap: false,
                                        label: {
                                            normal: {
                                                show: false,
                                                position: 'center'
                                            },
                                            emphasis: {
                                                show: true,
                                                textStyle: {
                                                    fontSize: '30',
                                                    fontWeight: 'bold'
                                                }
                                            }
                                        },
                                        labelLine: {
                                            normal: {
                                                show: false
                                            }
                                        },
                                        data: dataA
                                    }
                                ]
                            };

                            myChart.setOption(option);
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .box {
        margin: 20px;
        // border: 1px solid #eee;
        border-radius: 6px;
        padding: 20px;
        .left {
            width: calc(50% - 20px);
            margin-right: 20px;
            .background {
                border-radius: 8px;
                background-color: rgb(245, 247, 250);
            }
            .top {
                height: 40vh;
                margin-bottom: 20px;
            }
            .bottom {
                min-height: calc(30vh + 20px);
            }
        }
        .right {
            width: 50%;
            .background {
                background-color: rgb(245, 247, 250);
                border-radius: 8px;
            }
            .top {
                height: 40vh;
                margin-bottom: 20px;
                text-align: center;
                .top_exit {
                    overflow: hidden;
                    font-weight: 600;
                    padding-top: 20px;
                }
                p {
                    margin: 0;
                    border-bottom: 1px solid #e5e5e5;
                    line-height: 10vh;
                    height: 10vh;
                }
            }
            .bottom {
                min-height: calc(30vh + 20px);
            }
        }
    }

    @import "@/styles/common.scss";
</style>